<template>
  <BaseFilter class="date-range-filter" :label="label">
    <van-row class="date-input" type="flex" align="center" @click.native="showCalendar = true">
      <span class="date">{{ startDate }}</span>
      <div class="gutter" />
      <span class="date">{{ endDate }}</span>
      <van-icon name="notes-o" color="#999999" size="16px" style="margin-right: 10px;"/>
    </van-row>
    <PopupCalendar
      :show="showCalendar"
      :label="label"
      :value="value"
      type="range"
      :color="color"
      :confirmText="confirmText"
      :valueFormat="valueFormat"
      @input="onChange"
      @close="showCalendar = false"
    />
  </BaseFilter>
</template>

<script>
import BaseFilter from './BaseFilter.vue';
import PopupCalendar from './PopupCalendar.vue';
const dayjs = require('dayjs');
const customParseFormat = require('dayjs/plugin/customParseFormat');
dayjs.extend(customParseFormat);

export default {
  name: 'dateRangeFilter',
  props: {
    label: {
      type: String
    },
    value: {
      type: [Array]
    },
    color: {
      type: String
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    /**
     * YY 两位数的年份
     * YYYY 四位数的年份
     * M 1-12 月份，从 1 开始
     * MM 01-12 月份，两位数
     * MMM Jan-Dec 缩写的月份名称
     * MMMM January-December 完整的月份名称
     * D 1-31 月份里的一天
     * DD 01-31 月份里的一天，两位数
     * H 0-23 小时
     * HH 00-23 小时，两位数
     * h 1-12 小时, 12 小时制
     * hh 01-12 小时, 12 小时制, 两位数
     * m 0-59 分钟
     * mm 00-59 分钟，两位数
     * s 0-59 秒
     * ss 00-59 秒，两位数
     * S 0-9 毫秒，一位数
     * SS 00-99 毫秒，两位数
     * SSS 000-999 毫秒，三位数
     * Z -05:00 UTC 的偏移量
     * ZZ -0500 UTC 的偏移量，两位数
     * A AM / PM 上午 下午 大写
     * a am / pm 上午 下午 小写
     * timestamp 时间戳
     */
    format: {
      type: String,
      default: 'YYYY-MM-DD'
    },
    // 绑定值格式，timestamp
    valueFormat: {
      type: String,
      default: 'YYYY-MM-DD'
    }
  },
  components: {
    BaseFilter,
    PopupCalendar
  },
  data () {
    return {
      showCalendar: false
    }
  },
  methods: {
    onChange (value) {
      this.$emit('input', value);
      this.$emit('change', value);
    }
  },
  computed: {
    dayList () {
      function formatDate (value, format) {
        if (format === 'timestamp') {
          return dayjs(new Date(value));
        } else if (typeof value === 'string') {
          return dayjs(value, format);
        } else {
          return dayjs(value);
        }
      }
      return (this.value || []).map(item => {
        return formatDate(item, this.valueFormat);
      });
    },
    startDate () {
      let temp = this.dayList[0];
      return temp ? temp.format(this.format) : '开始日期';
    },
    endDate () {
      let temp = this.dayList[1];
      return temp ? temp.format(this.format) : '结束日期';
    }
  }
}
</script>

<style scoped>
  .date-input {
    height: 36px;
    background: #F6F7F9;
    margin-top: 8px;
    border-radius: 4px;
  }

  .gutter {
    height: 1px;
    width: 12px;
    background: #999999;
    flex-grow: 0;
    flex-shrink: 0;
  }
  .date-input .date {
    width: 100px;
    flex-grow: 1;
    flex-shrink: 1;
    font-size: 14px;
    color: #999999;
    text-align: center;
    padding: 0px 10px;
  }
</style>
